/*
 * @Author: bmx2019
 * @Date: 2020-04-22 14:48:11
 * @LastEditTime: 2020-08-18 16:01:49
 * @LastEditors: kl2018
 * @Description: In User Settings Edit
 * @FilePath: \odoc\components\OdocTypeChangeDialog.js
 */
import React, { Fragment } from 'react';
import { Button } from 'antd';
import { inject, observer } from 'mobx-react';
import { WeaTableNew } from 'comsMobx';
import { WeaDialog, WeaSearchGroup, WeaLocaleProvider, WeaPopoverHrm } from 'ecCom';
import { toJS } from 'mobx';

import * as dialogTypes from '../constants/OdocCompsDialogType';

const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

@inject('odocTypeChangeStore', 'odocCompsStore')
@observer
class OdocTypeDialogCom extends React.Component {
  constructor(props) { // 初始化，固定语法
    super(props);
  }

  componentDidMount() {
    const { odocTypeChangeStore, odocCompsStore } = this.props;
    let { setProperty, getContent } = odocTypeChangeStore;
    let { workflowid, requestid, f_weaver_belongto_userid, f_weaver_belongto_usertype } = toJS(odocCompsStore.requestParam);
    setProperty({
      workflowId: workflowid,
      requestId: requestid,
      f_weaver_belongto_userid,
      f_weaver_belongto_usertype,
    });
    getContent();
  }

  onCancel = () => {
    const { onClose, odocTypeChangeStore } = this.props;
    onClose && typeof onClose == 'function' && (onClose(dialogTypes.ODOC_CHANGE_ODOC_TYPE_DIALOG));
    odocTypeChangeStore.getContent();
  }

  render() {
    const { changeForm, tableTitle, tableStore, submitChanges, loading } = this.props.odocTypeChangeStore;
    const { odocCompsStore = {} } = this.props;
    const { dialogVisible } = odocCompsStore;
    const visible = dialogVisible.get(dialogTypes.ODOC_CHANGE_ODOC_TYPE_DIALOG);
    let buttons = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5zdz9y@submit`} type="primary" disabled={loading} onClick={() => submitChanges(this.onCancel)} >{getLabel('519017', '提交变更')}</Button>,
    ];

    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@th7768`}
        hasScroll={true}
        title={getLabel('510382', '文种变更')}
        visible={visible}
        style={{ width: 800, height: 450 }}
        buttons={buttons}
        onCancel={this.onCancel}
        moreBtn={{
          datas: [
            {
              key: '1',
              disabled: loading,
              icon: <i className="icon-coms-Upload-successfully" />,
              content: getLabel('519017', '提交变更'),
              onClick: () => submitChanges(this.onCancel),
            },
          ],
        }}
      >
        <div className="workflow-odocTypeChange">
          <div>{changeForm.render({ center: true })}</div>
          <div className="table">
            <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@n7fhyz`} title={tableTitle} showGroup={true} >
              <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@ipf3lo`}
                comsWeaTableStore={tableStore}
                getColumns={this.getColumns}
                hasOrder={true}
              />
            </WeaSearchGroup>
          </div>
        </div>
      </WeaDialog>
    );
  }

  getColumns = columns => columns.map((col) => {
    if (col.dataIndex == 'chanUserid') {
      return {
        ...col,
        render: (text, record) => (
          <Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@m1yu1w@${col.dataIndex}`}>
            <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@67mda4@${col.dataIndex}`} />
            <a href={`javaScript:openhrm(${record.chanUserid});`} onClick={this.clickHrm} style={{ color: '#4D7AD8', display: 'inline-block', lineHeight: '30px' }}>{record.chanUseridspan}</a>
          </Fragment>
        ),
      };
    }
    return col;
  });

  clickHrm = (e) => {
    window.pointerXY(e);
  }
}
export default OdocTypeDialogCom;
